{$layout}
{$template "menu"}

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="nodeId" :value="node.id"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">节点名称 *</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name"/>
				<p class="comment">给节点起一个容易识别的名称。</p>
			</td>
		</tr>
		<tr>
			<td>主机地址<em>（Host）</em> *</td>
			<td>
				<input type="text" name="host" placeholder="" maxlength="100" v-model="node.host"/>
				<p class="comment">连接数据库的主机地址，通常是域名或者IP。</p>
			</td>
		</tr>
		<tr>
			<td>数据库端口<em>（Port）</em> *</td>
			<td>
				<input type="text" name="port" value="" maxlength="5" style="width:6em" v-model="node.port"/>
				<p class="comment">连接数据库的端口。</p>
			</td>
		</tr>
		<tr>
			<td>数据库名称<em>（Database）</em> *</td>
			<td>
				<input type="text" name="database" value="" maxlength="100" placeholder="比如 edge_logs" v-model="node.database"/>
				<p class="comment">要写入日志的数据库名称，需要事先创建好，而且需要有创建新表和读写数据的权限。建议命名为edge_logs。</p>
			</td>
		</tr>
		<tr>
			<td>用户名<em>（Username）</em> *</td>
			<td>
				<input type="text" name="username" value="" v-model="node.username"/>
				<p class="comment">连接数据库的用户名。</p>
			</td>
		</tr>
		<tr>
			<td>密码<em>（Password）</em></td>
			<td>
				<input type="password" name="password" value="" v-model="node.password"/>
				<p class="comment">连接数据库的密码。</p>
			</td>
		</tr>
		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
			<tr>
				<td>详细描述</td>
				<td>
					<textarea rows="3" name="description" v-model="node.description"></textarea>
				</td>
			</tr>
			<tr>
				<td>是否启用</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
						<label></label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn></submit-btn>
</form>